<template>
    <div class="echart-content" >
         <div class="left" >
             <div class="left-content">
                 <div class="top">
                   
                 </div>
                 <div class="bottom">
                     <h4>热门城市所占比例</h4>
                     <div ref='hotCity' class="hotCity">

                     </div>
                 </div>

             </div>
         </div>      
         <div class="right" >
             
         </div>
    </div>
 </template>

<script>
import chartoption from '../echartsOptions/register'
import {createEchart} from '../createEcharts'

export default {
  data() {
    return {

    }
  },
  mounted(){
        createEchart(this.$refs.hotCity,chartoption)
  },
}
</script>

<style scoped>
.echart-content {
   flex: 1;
   /* background: red; */
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   background: pink;
   padding: 30px;
}
.left {
    flex:4;
    background: blue;
    position: relative;
}
.left-content {
    height: 100%;
    width: 60%;
    background:aliceblue;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    padding: 20px 0;
    box-sizing: border-box;
}

.right {
    flex:3;
    background: red;

}
.top {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.bottom {
    height: 50%;
    width: 100%;
    background: olivedrab;
}
h4 {
    height: 50px;
    line-height: 50px;
    color:whitesmoke;
}
.bottom div{
    flex: 1;
    width: 100%;
}
.hotCity {
  height: 80%;
  background: orangered;
  width: 100%;
}
</style>
